﻿<!DOCTYPE HTML>
<html lang="en-Us">
<head>
<meta charst="UTF-8"/>
<title>鼠标经过突出图片</title>
<style>
ul{
	margin:auto;
	padding:0;
	list-style:none;
	width:312px;
	
}
ul li{
	float:left;
	font-size:0px;/* 使li换行产生的空白符的大小为0*/
	border:2px solid #000;
	background:#000;
}
ul li img{
	width:100px;
	height:100px;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<ul>
	<li><a href="javascript:void(0)"><img src="images/01.gif" title="猫咪1" alt="喵咪1"/></a></li>
	<li><a href="javascript:void(0)"><img src="images/02.gif" title="猫咪2" alt="喵咪2"/></a></li>
	<li><a href="javascript:void(0)"><img src="images/03.gif" title="猫咪3" alt="喵咪3"/></a></li>
	<li><a href="javascript:void(0)"><img src="images/04.gif" title="猫咪4" alt="喵咪4"/></a></li>
	<li><a href="javascript:void(0)"><img src="images/05.gif" title="猫咪5" alt="喵咪5"/></a></li>
	<li><a href="javascript:void(0)"><img src="images/06.gif" title="猫咪6" alt="喵咪6"/></a></li>
	<li><a href="javascript:void(0)"><img src="images/07.gif" title="猫咪7" alt="喵咪7"/></a></li>
	<li><a href="javascript:void(0)"><img src="images/08.gif" title="猫咪8" alt="喵咪8"/></a></li>
	<li><a href="javascript:void(0)"><img src="images/01.gif" title="猫咪9" alt="喵咪9"/></a></li>
</ul>

<script type="text/javascript">
$(function(){
	$("ul li").hover(function(){
		$(this).siblings('li').children('a').css('opacity','0.5');
	},function(){
		$(this).siblings('li').children('a').css('opacity','1');
	});
});	
</script>
</body>
</html>